<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      千米：<input type="text" v-model="kilometers" />
      <br />
      米：<input type="text" v-model="meters" />
      <div id="box"></div>
    </div>

    <script src="vue.js"></script>
    <script>
      // 虽然计算属性在大多数情况下更合适，
      // 但有时也需要一个自定义的侦听器。
      // 这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，
      // 来响应数据的变化。
      // 当需要在数据变化时执行异步或开销较大的操作时，
      // 这个方式是最有用的。

      /*
      计算属性和侦听器
      Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。
      当你有一些数据需要随着其它数据变动而变动时，
      你很容易滥用 watch——特别是如果你之前使用过 AngularJS。
      然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调  
      */

      var vm = new Vue({
        el: '#app',
        data() {
          return {
            meters: 0,
            kilometers: 0
          }
        },
        methods: {},
        computed: {},
        watch: {
          //监控数据的变化
          meters(newVal, oldVal) {
            this.kilometers = newVal / 1000
            this.meters = newVal
          },
          kilometers(newVal, oldVal) {
            this.kilometers = newVal
            this.meters = newVal * 1000
          }
        }
      })
      //全局实例   $data $el
      vm.$watch('kilometers', function(newval, oldval) {
        document.getElementById('box').innerHTML =
          '新的值是' + newval + '  原来的值是：' + oldval
      })
    </script>
  </body>
</html>
